.medical-info-line {
  width: 100%;
  height: 100%;
  position: relative;
  padding: $padding10;
  padding-left: $padding20;
  .table {
    width: 100%;
    height: 100%;
  }
  .two-medical-line {
    margin-top: 5%;
  }
  .two-data-line {
    font-size: 120%;
    padding: 4% 3%;
    border-radius: 0;
    background: $rgba6;
    &.odd {
      border-radius: $padding5;
      background: $rgba5;
    }
    .time-num {
      color: $color1;
      margin: 0 5px;
    }
  }
  .medical_name {
    color: $color1;
    font-size: 140%;
    text-align: center;
    background: $rgba5;
    margin-right: 4%;
  }
  .first-medical-size {
    margin-right: 3%;
    font-size: 120%;
    .useing-size {
      margin-right: 0;
    }
    .time-num {
      color: $color1;
      margin: 0 5px;
    }
  }
  .triangle-border{
    border: solid $width1 $color11;
    padding: $padding3 $padding10;
    border-radius: $padding5;
    position: relative;
    &:last-child{
      margin-left: $padding5;
    }
    &:after {
      position: absolute;
      display: block;
      top:-3*$width1;
      left: 2*$width1;
      width: 0;
      height: 3*$long / 2;
      border-color: transparent;
      border-style: solid;
      border-width: $width1;
      content: " ";
      border-right-color: $color11;
      transform:rotate(-135deg);
    }
    .arrow-triangle{
      position: absolute;
      display: block;
      width: 0;
      height: 0;
      border-color: transparent;
      border-style: solid;
      border-width: 11px;
      top:-$width3;
      left: -$width3;
      border-top-color: $rgba4;
      border-left-color: $rgba4;
      border-bottom-width: 0;
      border-left-width: 0;
      &:after {
        position: absolute;
        display: block;
        width: 0;
        height: 0;
        border-color: transparent;
        border-style: solid;
        bottom: 1px;
        content: " ";
        border-right-color: $rgba4;
        border-bottom-width: 0;
      }
    }
    .time-num {
      font-size: 110%;
      color: $color1;
      margin: 0 $padding5;
    }
  }
}
.medical-portrait {
  width: 1/4 * 100%;
  position: relative;
  .medical_head {
    width: $width50;
    height: $width50;
    border-radius: 100%;
    border: solid $padding5 $rgba2;
    margin: auto;
    color: $color2;
    font-size: 110%;
    line-height: 3*$width50/4;
    text-align: center;
  }

}
.medical-chart {
  width: 3/4 * 100%;
  position: relative;
  height:100%;
  .table{
    width: 100%;
    height: 100%;
    .table-cell{
      width: 100%;
      text-align: center;
    }
  }
  .triangle-line {
    text-align: center;

  }
  .status-charts {
    .triangle-echarts {
      width: 1/3 * 100%;
      height: 100%;
      margin-top: $padding10;
    }
    height: 55%;
  }
}
.display-height{
  margin-left: -$width1;
}

@media screen and (min-width: 1280px) and (max-width: 1599px) {
  .medical-info-line {
    .two-data-line {
      font-size: 105%;
    }
    .medical_name {
      font-size: 115%;

    }
    .first-medical-size {
      font-size: 105%;
    }
  }
}

@media screen and (min-width: 1024px) and (max-width: 1279px) {
  .medical-info-line {

    .two-data-line {
      font-size: 100%;
    }
    .medical_name {
      font-size: 85%;
      margin-right: $padding3;
    }
    .first-medical-size {
      margin-right: 0;
      font-size: 85%;
    }
  }
}

@media screen  and (max-width: 1023px) {
  .medical-info-line {
    padding: 4%;

    .triangle-border{
      padding: $padding3 1%;
    }
    .two-data-line {
      font-size: 85%;
    }
    .medical_name {
      font-size: 85%;
      margin-right: 0%;
    }
    .first-medical-size {
      margin-right: 0;
      font-size: 85%;
      .time-num {
        color: $color1;
        margin: 0;
      }
    }
  }
}

@media screen and (min-width: 1369px) and (max-height: 750px) {
  .medical-info-line {
    .two-medical-line {
      margin-top: 3%;
    }
    .two-data-line {
      font-size: 100%;
      padding: 3% 3%;
    }
    .medical_name {
      font-size: 110%;
    }
    .first-medical-size {
      font-size: 100%;
    }
  }
}

@media screen and (min-width: 1369px) and (max-height: 599px) {
  .medical-info-line {
    .two-medical-line {
      margin-top: 1%;
    }
    .two-data-line {
      font-size: 80%;
      padding: 2.4% 3%;
    }
    .medical_name {
      font-size: 100%;
    }
    .first-medical-size {
      font-size: 100%;
    }
  }
}

@media screen and (max-width: 1368px) and (max-height: 750px) {
  .medical-info-line {
    .two-medical-line {
      margin-top: 3%;
    }
    .two-data-line {
      font-size: 100%;
      padding: 3% 3%;
    }
    .medical_name {
      font-size: 110%;
    }
    .first-medical-size {
      font-size: 100%;
    }
  }
}

@media screen and (max-width: 1368px) and (max-height: 599px) {
  .medical-info-line {
    .two-medical-line {
      margin-top: 1%;
    }
    .two-data-line {
      font-size: 80%;
      padding: 2.4% 3%;
    }
    .medical_name {
      font-size: 100%;
    }
    .first-medical-size {
      font-size: 100%;
    }
  }
}
